<template>
    <div class="r-table">
        <div class="r-row r-header">
            <div class="r-coll c-title-5" v-for="(column, index) in tableConfig" :style="{ flex: column.flex }">
                <slot name="header" :column="column" :index="index">{{ column.label }}</slot>
            </div>
        </div>
        <JEmpty v-if="true"></JEmpty>
        <template v-else>
            <div class="r-row r-body" v-for="(row, rowIndex) in listArr" :key="row[keyProp]" @click="onClick(row)">
                <div class="r-coll c-title-4" v-for="(column, columnIndex) in tableConfig" :key="columnIndex"
                    :style="{ flex: column.flex }">
                    <slot :name="`column-${columnIndex}`" :row="row" :rowIndex="rowIndex" :column="column"
                        :columnIndex="columnIndex">{{ row[column.prop] }}</slot>
                </div>
            </div>
        </template>
        <v-pagination v-show="listArr.length > 0" :length="Math.ceil(tableData.length / speed)" :total-visible="3" v-model="idx"></v-pagination>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import JEmpty from "@/components/j-empty/index.vue";
const idx = ref(1);
const speed = 10;

const listArr = computed(() => {
    if (props.tableData.slice) {
        return props.tableData.slice((idx.value - 1) * speed, idx.value * speed);
    } else {
        return [];
    }
});

const props = defineProps({
    keyProp: {
        type: String,
        default: "id"
    },
    tableData: {
        type: Array<any>,
        required: true
    },
    tableConfig: {
        type: Array<any>,
        required: true
    }
});

const emit = defineEmits(["click"]);

const onClick = (row: any) => {
    emit("click", row);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
